<template>
	<view class="PB_30" style="background-color:#0f1f2f">
		<view class="PT_3 PLR_3 top">
			<view class="flex_rowL">
				<image @click="goBack" class="W_4vw" src="../../static/goback2.png" mode="widthFix"></image>
				<view class="fontS_18 PL_2 font_weight_bold color_fff">
					{{iconName}}/USDT
				</view>
			</view>
			<view class="PTB_3 flex_row_between">
				<view class="">
					<view
					:class="(currentItem.close-currentItem.open)>0?'color_up':'color_down'" 
					class="color_up font_weight_bold fontS_24">
						${{Number(currentItem.close).toFixed(2)}}
					</view>
					<view class="flex_rowL">
						<view class="fontS_10 color_gray">
							≈{{((currentItem.close)*rate).toFixed(2)}}CNY
						</view>
						<view
						:class="(currentItem.close-currentItem.open)>0?'color_up':'color_down'" 
						class="fontS_10 PL_1">
							{{(currentItem.close-currentItem.open)>0?'+':''}}{{((currentItem.close-currentItem.open)/currentItem.open*100).toFixed(2)}}%
						</view>
					</view>
				</view>
				<view class="fontS_12 flex_col_between">
					<view class="flex_row_between W_40vw">
						<view class="color_gray">
							最高价
						</view>
						<view class="font_weight_bold color_fff">
							{{Number(currentItem.high).toFixed(2)}}
						</view>
					</view>
					<view class="flex_row_between W_40vw PT_1">
						<view class="color_gray">
							最低价
						</view>
						<view class="font_weight_bold color_fff">
							{{Number(currentItem.low).toFixed(2)}}
						</view>
					</view>
					<!-- <view class="flex_row_between W_40vw PT_1">
						<view class="color_gray">
							24H量
						</view>
						<view class="font_weight_bold color_fff">
							{{Number(currentItem.num).toFixed(4)}}
						</view>
					</view> -->
				</view>
				
			</view>
			
		</view>
		
		<view class="MT_2  ">
			<view class="flex_row_around PTB_3">
				<view 
					@click="tabClick(index,item.key)"
					v-for="(item,index) in timeArr" 
					:key='index' 
					:class="idx==index?'tab_ac':''"
					class="fontS_12 color_gray PB_1">
					{{item.label}}
				</view>
			</view>
			
			<scroll-view scroll-x="true" >
				<!-- <view style="width: 100vw;" class="H_60vw">
				  <qiun-data-charts
				    type="candle"
				    :chartData="chartData"
				    background="none"
				    :ontouch="true"
					:animation="false"
				  />
				</view> -->
				<view 
					@click="echarts.onClick" 
					:prop="option" 
					:change:prop="echarts.updateEcharts" 
					id="echarts"
					class="echarts"
					style="width: 100vw;height: 44vh;"
				 >
				 </view>
			</scroll-view>
			
		</view>
		
		<view class="MT_2  color_fff">
			<view class="flex_row_around">
				<view @click="tapClick(0)" :class="idx1==0?'tab_ac':''" class="font_weight_bold fontS_16 P_2">
					简介
				</view>
				<!-- <view @click="tapClick(1)" :class="idx1==1?'tab_ac':''" class="font_weight_bold fontS_16 P_2">
					持仓记录
				</view>
				<view @click="tapClick(2)" :class="idx1==2?'tab_ac':''" class="font_weight_bold fontS_16 P_2">
					历史明细
				</view> -->
			</view>
			
			<view v-if="idx1==0" class="color_gray PLR_3">
				<view class="fontS_20 font_weight_bold">
					{{infos.name}}
				</view>
				<view class="flex_row_between PT_2">
					<view class="">
						发行时间
					</view>
					<view class="color_fff">
						{{infos.publish_date}}
					</view>
				</view>
				<view class="flex_row_between PT_2">
					<view class="">
						发行总量
					</view>
					<view class="color_fff">
						{{infos.publish_total}}
					</view>
				</view>
				<view class="flex_row_between PT_2">
					<view class="">
						流通总量
					</view>
					<view class="color_fff">
						{{infos.cycle_total}}
					</view>
				</view>
				<view class="flex_row_between PT_2">
					<view class="">
						众筹价格
					</view>
					<view class="color_fff">
						{{infos.price}}
					</view>
				</view>
				<view class="PT_2">
					<!-- <view class="">
						白皮书
					</view> -->
					<scroll-view scroll-x="true" >
						<view class="w_100vw">
							<view v-html="infos.link" class="color_fff W_40vw"></view>
						</view>
					</scroll-view>
					
					
					
				</view>
				<!-- <view class="flex_row_between PT_2">
					<view class="">
						官网
					</view>
					<view class="color_fff">
						{{infos.link}}
					</view>
				</view>
				<view class="flex_row_between PT_2">
					<view class="">
						区块查询
					</view>
					<view class="color_fff">
						{{infos.link}}
					</view>
				</view> -->
				<view class="flex_row_between PT_2">
					<view class="font_weight_bold fontS_22">
						简介
					</view>
					<!-- <view class="color_fff W_60vw">
						{{infos.link}}
					</view> -->
				</view>
				<view class="flex_row_between PT_2">
					
					<view class="color_fff">
						{{infos.desc}}
					</view>
				</view>
				
			</view>
			
			<view class="">
				<view class="">
					
				</view>
			</view>
		</view>
		
		<!-- <view class=" fixedBLR flex_row_around H_40vw PB_8">
			<view @click="$refs.popup.open()" class="color_bgdown PTB_2 PLB PLR_10 B_radius_5 color_fff">
				做多
			</view>
			<view @click="$refs.popup2.open()" class="color_bgup PTB_2 PLB PLR_10 B_radius_5 color_fff">
				做空
			</view>
		</view> -->
		
		<!-- <uni-popup ref="popup" type="bottom">
			<view class=" BT_radius_10 PLR_2 PT_3 PB_10">
				<view class="flex_row_between">
					<view class="font_weight_bold">
						{{iconName}}/USDT
					</view>
					<image class="W_6vw" 
					@click="$refs.popup.close()"
					src="../../static/utils/idea-kefu/icon/stop.png" mode="widthFix"></image>
				</view>
				<view class="flex_row_between PTB_2">
					<view class="color_gray">
						交易数量
					</view>
					<view class="PTB_2 B_radius_5 flex_rowL PLR_3" style="border: 1px solid gray;">
						<input v-model="moreNum" type="number" placeholder="限额1-10000" />
						<view class="pub_color font_weight_bold">
							KSA
						</view>
					</view>
				</view>
				
				<view class="flex_row_between PTB_2">
					<view class="color_gray">
						周期合约
					</view>
					<view class="flex_rowL">
						<view 
						@click="doClick('60s')"
						:class="idx2=='60s'?'btn_up':'btn_no'" 
						class="PTB_1 PLR_3 B_radius_5">
							60s
						</view>
						<view
						@click="doClick('120s')"
						:class="idx2=='120s'?'btn_up':'btn_no'" 
						class="PTB_1 PLR_3 B_radius_5">
							120s
						</view>
						<view
						@click="doClick('300s')"
						:class="idx2=='300s'?'btn_up':'btn_no'" 
						class="PTB_1 PLR_3 B_radius_5">
							300s
						</view>
					</view>
				</view>
				
				<view class="flex_row_between PTB_2">
					<view class="color_gray">
						可用余额
					</view>
					<view class="pub_color font_weight_bold">
						{{user.user_money}}KSA
					</view>
				</view>
				
				<view @click="doMore" class="PTB_2 textC color_bgdown MTB_3 color_fff B_radius_5">
					做多
				</view>
			</view>
		</uni-popup> -->
		
		
		<!-- <uni-popup ref="popup2" type="bottom">
			<view class=" BT_radius_10 PLR_2 PT_3 PB_10">
				<view class="flex_row_between">
					<view class="font_weight_bold">
						{{iconName}}/USDT
					</view>
					<image class="W_6vw" 
					@click="$refs.popup2.close()"
					src="../../static/utils/idea-kefu/icon/stop.png" mode="widthFix"></image>
				</view>
				<view class="flex_row_between PTB_2">
					<view class="color_gray">
						交易数量
					</view>
					<view class="PTB_2 B_radius_5 flex_rowL PLR_3" style="border: 1px solid gray;">
						<input v-model="moreNum" type="number" placeholder="限额1-10000" />
						<view class="pub_color font_weight_bold">
							KSA
						</view>
					</view>
				</view>
				
				<view class="flex_row_between PTB_2">
					<view class="color_gray">
						周期合约
					</view>
					<view class="flex_rowL">
						<view 
						@click="doClick('60s')"
						:class="idx2=='60s'?'btn_down':'btn_no'" 
						class="PTB_1 PLR_3 B_radius_5">
							60s
						</view>
						<view
						@click="doClick('120s')"
						:class="idx2=='120s'?'btn_down':'btn_no'" 
						class="PTB_1 PLR_3 B_radius_5">
							120s
						</view>
						<view
						@click="doClick('300s')"
						:class="idx2=='300s'?'btn_down':'btn_no'" 
						class="PTB_1 PLR_3 B_radius_5">
							300s
						</view>
					</view>
				</view>
				
				<view class="flex_row_between PTB_2">
					<view class="color_gray">
						可用余额
					</view>
					<view class="pub_color font_weight_bold">
						{{user.user_money}}KSA
					</view>
				</view>
				
				<view @click="doLess" class="PTB_2 textC color_bgup MTB_3 color_fff B_radius_5">
					做空
				</view>
			</view>
		</uni-popup> -->
	
		 <!-- <uni-drawer :width="300" ref="showRight" mode="left" :mask-click="true">
			<scroll-view class="PLR_2" style="height: 100%;background-color: #0f1f2f;" scroll-y="true">
				<view class="PT_6 PB_8 color_fff">
					周期
				</view>
				<view @click="listClick(item,i)" class="PTB_2 color_fff flex_row_between" v-for="(item,i) in drawerList" :key='i'>
					<view class="flex_rowL">
						<view class="font_weight_bold">
							{{item.name}}
						</view>
						<view class="color_gray">
							/USDT
						</view>
					</view>
					<view class="color_up">
						{{item.name=='USDT'?'1':item.num}}
					</view>
				</view>
			</scroll-view>
		</uni-drawer> -->
	</view>
</template>


<script>
	const upColor = '#00da3c';
	const downColor = '#ec0000';
	export default {
		data() {
			return {
				infos:{},
				id:'',
				birds:[],
				asks:[],
				option:{},
				chartData:{
					"categories": [],
					"series": [
						{
							"name": "上证指数",
							"data": []
						}
					]
				},
				idx:0,
				idx1:0,
				idx2:'60s',
				timeArr:[
					{
						label:'1分钟',
						key:'1min'
					},
					{
						label:'15分钟',
						key:'15min'
					},
					{
						label:'30分钟',
						key:'30min'
					},
					{
						label:'1小时',
						key:'60min'
					},
					{
						label:'1天',
						key:'1day'
					},
				],
				kTime:'1min',
				timer:'',
				cangList:[],
				page:1,
				showText:'',
				state:true,
				user:{},
				icon:'',
				iconName:'',
				moreNum:'',
				drawerList:[],
				currentItem:{},
				rate:'',
				parsent:''
			}
		},
		onLoad(options) {
			this.icon = options.code;
			this.iconName = options.code.toUpperCase()
			this.id = options.id;
			this.tabClick(0,'1min');
			this.getRate();
			this.getBilist();
			this.getIntro()
			
		},
		onShow() {
			this.getIntro()
			this.tabClick(0,'1min');
		},
		onHide() {
			this.closeSocket()
		},
		
		onPullDownRefresh() {
			//this.getSorts();
			// this.getInfo()
			this.getBilist();
			this.getIntro()
			this.tabClick(0,'1min');
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getIntro(){
				let _this = this;
				this.$req('currency/show',{id:_this.id},function(res){
					_this.infos = res.data;
					//console.log(res)
				})
			},
			getRate(){
				let _this = this;
				this.$req('index/getRate',{},function(res){
					_this.rate = res.data.rate
					//console.log(res)
				})
			},
			sendMsg(){
				let _this = this;
				uni.sendSocketMessage({
					data: JSON.stringify({
						// pang: Number(data.ping),
						// sub:'market.'+_this.icon+'usdt.kline.15min',
						// "id": "id1"
						
						symbol:(_this.icon?_this.icon:'btc')+'usdt',
						period:_this.kTime,
						size:"200"
					}),
					success(res) {
						console.log(res)
						uni.onSocketMessage(function(info){
							if(JSON.parse(info.data).type == 'onMessage' && JSON.parse(info.data).data.period == _this.kTime){
								let dataIns = JSON.parse(info.data).data.content;
								 //console.log('getInfo')
								_this.data3 = [];
								dataIns.forEach((item,i)=>{
									_this.data3.push([
										_this.timestampToTime(item.id),
										Number(item.open),
										Number(item.close),
										Number(item.low),
										Number(item.high),
										Number(item.vol) 
									]);
								})
								_this.currentItem = dataIns[0];
								// console.log(_this.currentItem)
								_this.data3 = _this.data3.reverse()
								//console.log(_this.data3)
								_this.initData()
												
							}
							
							
						})
					},
					fail(res) {
						setTimeout(()=>{
							_this.sendMsg()
						},1000)
						console.log(JSON.stringify(res))
					}
				})
			},
			getCoin(){
				let _this = this
				
			    uni.onSocketOpen((res) => {
					console.log("azz")
					console.log(JSON.stringify(res), 'WebSocket连接已打开');
					// setTimeout(()=>{
					// 	_this.sendMsg()
					// },500)
					uni.sendSocketMessage({
						data: JSON.stringify({
							// pang: Number(data.ping),
							// sub:'market.'+_this.icon+'usdt.kline.15min',
							// "id": "id1"
							
							symbol:(_this.icon?_this.icon:'btc')+'usdt',
							period:_this.kTime,
							size:"200"
						}),
						complete(res) {
							console.log(JSON.stringify(res))
						}
					})
					
					uni.onSocketMessage(function(info){
						if(JSON.parse(info.data).type == 'onMessage' && JSON.parse(info.data).data.period == _this.kTime){
							let dataIns = JSON.parse(info.data).data.content;
							 //console.log('getInfo')
							_this.data3 = [];
							dataIns.forEach((item,i)=>{
								_this.data3.push([
									_this.timestampToTime(item.id),
									Number(item.open),
									Number(item.close),
									Number(item.low),
									Number(item.high),
									Number(item.vol) 
								]);
							})
							_this.currentItem = dataIns[0];
							// console.log(_this.currentItem)
							_this.data3 = _this.data3.reverse()
							//console.log(_this.data3)
							_this.initData()
											
						}
						
						
					})
				});	
				
				// setTimeout(()=>{
				// 	_this.sendMsg()
				// },500)
				
			},
			connectSocketInit() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					// #ifdef APP-PLUS
						url: "ws://47.243.163.120:2346",
					// #endif
					// #ifdef H5
						url: "ws://47.243.163.120:2346",
					// #endif
					success(data) {
						_this.hasSocket = true;
						console.log("websocket连接成功"+JSON.stringify(data));
						// setTimeout(()=>{
							_this.getCoin()
						// },5000)
						
						// uni.onSocketOpen(function () {
						//   console.log('open')
						// });
						// uni.onSocketMessage(function (res) {
						//   console.log('收到服务器内容：' + res.data);
						// });
					},
				});
			 
				//  uni.onSocketMessage(function (res) {
				//    console.log('收到服务器内容：' + res.data);
				//  });
				// // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				// uni.onSocketOpen(function () {
				//   console.log('open')
				// });
				uni.onSocketError(function (res) {
				  console.log(JSON.stringify(res));
				  _this.connectSocketInit()
				});
				// 这里仅是事件监听【如果socket关闭了会执行】
				uni.onSocketClose(() => {
					console.log("socket已经被关闭了")
					_this.connectSocketInit()
				})
			},
			closeSocket() {
				let _this = this;
				uni.closeSocket({
					success(res) {
						//this.is_open_socket = false;
						console.log("关闭成功", res)
						// setTimeout(()=>{
						// 	_this.connectSocketInit()
						// },500)
						
					},
					fail(err) {
						console.log("关闭失败", err)
						// _this.connectSocketInit()
					}
				})
			},
			initData(rawData){
				// var chartDom = document.getElementById('echarts')
				// var myChart = echarts.init(chartDom);
				let _this = this;
				var data = this.splitData(JSON.parse(JSON.stringify(_this.data3)));
				//console.log(data)
				// myChart.setOption(
				    // (
					_this.option = {
				      animation: false,
				      legend: {
						show:false,
				        bottom: 10,
				        left: 'center',
				        data: []
				      },
				      tooltip: {
						show:true,
				        trigger: 'axis',
				        axisPointer: {
				          type: 'cross'
				        },
				        borderWidth: 1,
				        borderColor: '#ccc',
				        padding: 10,
				        textStyle: {
				          color: '#fff'
				        },
				        position: function (pos, params, el, elRect, size) {
				          const obj = {
				            top: 10
				          };
						  //console.log(params)
				          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
				          return obj;
						 
			
				        }
				      },
				  //     axisPointer: {
						// show:false,
				  //       link: [
				  //         {
				  //           xAxisIndex: 'all'
				  //         }
				  //       ],
				  //       label: {
				  //         backgroundColor: '#777'
				  //       }
				  //     },
				      
				  //     brush: {
						// show:false,
				  //       xAxisIndex: 'all',
				  //       brushLink: 'all',
				  //       outOfBrush: {
				  //         colorAlpha: 0.1
				  //       }
				  //     },
				  //     visualMap: {
				  //       show: true,
				  //       seriesIndex: 5,
				  //       dimension: 2,
				  //       pieces: [
				  //         {
				  //           value: 1,
				  //           color: downColor
				  //         },
				  //         {
				  //           value: -1,
				  //           color: upColor
				  //         }
				  //       ]
				  //     },
				      grid: [
						  
				        {
				          left: '0%',
				          right: '13%',
				          height: '85%',
						  top:'4%',
						  borderWidth:'0'
				        },
				        {
						  show:false,
				          left: '2%',
				          right: '10%',
				          top: '4%',
				          height: '0'
				        }
				      ],
				      xAxis: [
				        {
				          type: 'category',
				          data:data.categoryData,
				          scale: true,
				          symbol: "none",
				          boundaryGap: [0,1],
				          axisLine: { 
							  onZero: false,
							  lineStyle: {
								  color: '#cecece', // 改变x轴颜色
							  } ,
						  },
				          splitLine: { show: true },
				          min: 'dataMin',
				          max: 'dataMax',
				          axisPointer: {
				            z: 100
				          },
						  axisLabel: {
							  show: true,
							  textStyle: {
								  color: 'gray'
							  },
						  }
				        },
				        {
				          type: 'category',
						  show:false,
				          gridIndex: 1,
				          data: data.categoryData,
				          scale: true,
				          boundaryGap: false,
				          axisLine: { onZero: false },
				          axisTick: { show: false },
				          splitLine: { show: false },
				          axisLabel: { show: false },
				          min: 'dataMin',
				          max: 'dataMax'
				        }
				      ],
				      yAxis: [
				        {
				          scale: true,
						  position: 'right',
				          splitArea: {
				            show: false
				          },
						  axisLine: {
							  onZero: false,
							  lineStyle: {
								  color: '#cecece', // 改变x轴颜色
							  } ,
						  },
						  axisLabel: {
							  show: true,
							  color:'red',
							  textStyle: {
								  color: 'gray'
							  }
						  }
				        },
				        {
				          scale: true,
				          gridIndex: 1,
				          splitNumber: 2,
				          axisLabel: { show: false },
				          axisLine: { show: false },
				          axisTick: { show: false },
				          splitLine: { show: false },
						  
				        }
				      ],
				      dataZoom: [
				        {
				          type: 'inside',
				          xAxisIndex: [0, 1],
				          start: 84,
				          end: 100
				        },
				        {
				          show: true,
				          xAxisIndex: [0, 1],
				          type: 'inside',
				          top: '83%',
				          start: 84,
				          end: 100
				        }
				      ],
				      series: [
				        {
				          name: '日K',
				          type: 'candlestick',
				          data:data.values,
				          symbol: 'none',
				          itemStyle: {
				            color: upColor,
				            color0: downColor,
				            borderColor: upColor,
				            borderColor0: downColor
				          },
				          
				        },
				        {
				          name: 'MA5',
				          type: 'line',
				          symbol: "none",
				          data: _this.calculateMA(5, data),
				          smooth: true,
				          lineStyle: {
				            opacity: 1,
							width: 1,
							color:'#9800ff'
				          }
				        },
				        {
				          name: 'MA10',
				          type: 'line',
				          symbol: "none",
				          data: _this.calculateMA(10, data),
				          smooth: true,
				          lineStyle: {
				            opacity: 1,
							width: 1,
							color:'#00ffa8'
				          }
				        },
				        {
				          name: 'MA20',
				          type: 'line',
				          symbol: "none",
				          data: _this.calculateMA(20, data),
				          smooth: true,
				          lineStyle: {
				            opacity: 1,
							width: 1,
							color:'#fff100'
				          }
				        },
				        // {
				        //   name: 'MA30',
				        //   type: 'line',
				        //   symbol: "none",
				        //   data: _this.calculateMA(30, data),
				        //   smooth: true,
				        //   lineStyle: {
				        //     opacity: 0.5
				        //   }
				        // },
				        // {
				        //   name: 'Volume',
				        //   type: 'bar',
				        //   xAxisIndex: 1,
				        //   yAxisIndex: 1,
				        //   data: data.volumes
				        // }
				      ]
				    }
					// ),
				 //    true
				 //  );
				  // myChart.dispatchAction({
				  //   type: 'line',
				  //   areas: [
				  //     {
				  //       brushType: 'lineX',
				  //       coordRange: [],
				  //       xAxisIndex: 0
				  //     }
				  //   ]
				  // });
			},
			listClick(item,i){
				let _this = this;
				this.icon = item.code;
				this.iconName = item.name;
				//console.log(this.icon)
				// this.currentItem = item;
				// this.$refs.showRight.close();
				this.tabClick(0,'1min');
				this.getBilist();
				// this.getDeep();
			},
			// listClick(item,i){
			// 	let _this = this;
			// 	this.icon = item.code;
			// 	this.iconName = item.name;
			// 	//console.log(this.icon)
			// 	this.currentItem = item;
			// 	this.$refs.showRight.close();
			// 	this.tabClick(0,'1min');
			// 	this.getBilist();
				
			// },
			getBilist(){
				let _this = this;
				this.$req('currency/index',{},function(res){
					console.log(res)
					let list = res.data;
					let arr = [];
					list.forEach((item,i)=>{
						if(item.code!='ksa'){
							_this.drawerList.push({
								name:item.name,
								code:item.code,
								num:'',
								low:'',
								high:'',
								open:'',
								close:'',
								rate:''
							})
						}
						
					});
					//console.log(_this.icon)
					// if(!_this.icon){
					// 	_this.icon = _this.drawerList[0].code;
					// 	_this.iconName = _this.drawerList[0].name;
					// }
					
					_this.drawerList.forEach((item,i)=>{
						if(item.code!='ksa' && item.code!='usdt'){
							_this.getNum(item.code+'usdt',i)
						}
						
					})
				})
			},
			getNum(key,i){
				let _this = this;
				this.$req('huobi/merged',{symbol:key},function(res){
					_this.drawerList[i].num = res.data.amount;
					_this.drawerList[i].low = res.data.low;
					_this.drawerList[i].high = res.data.high;
					_this.drawerList[i].close = res.data.close;
					_this.drawerList[i].open = res.data.open;
					_this.drawerList[i].rate = 
					((res.data.close - res.data.open)/res.data.open*100).toFixed(2);
				})
				console.log(this.currentItem)
				
				if(!this.currentItem.code){
					this.currentItem = _this.drawerList[0];
				}
					
				
				
				
			},
			doPaserent(item){
				this.parsent = ((item.close - item.open)/item.open).toFixed(2)
				console.log(item)
			},
			doMore(){
				let _this = this;
				if(!this.moreNum){
					this.toast('请输入交易数量')
				}else{
					this.$req('bet/create',{
						action_code:1,
						action_money:_this.moreNum,
						base_currency:_this.icon,
						cycle:_this.idx2
					},function(res){
						_this.toast(res.msg)
						setTimeout(()=>{
							_this.$refs.popup.close()
						},500)
					})
				}
				
			},
			doLess(){
				let _this = this;
				if(!this.moreNum){
					this.toast('请输入交易数量')
				}else{
					this.$req('bet/create',{
						action_code:2,
						action_money:_this.moreNum,
						base_currency:_this.icon,
						cycle:_this.idx2
					},function(res){
						_this.toast(res.msg)
						setTimeout(()=>{
							_this.$refs.popup.close()
						},500)
					})
				}
				
			},
			getUser(){
				let _this = this;
				this.$req('auth/me',{},function(res){
					_this.user = res.data;
				})
			},
			doClick(i){
				this.idx2 = i;
			},
			getList(){
				let _this = this;
				this.$req('bet/index',{page:_this.page,scene:_this.idx},(res)=>{
					if(res.code==1){
						if(res.data.list && res.data.list.length>0){
							if(_this.page==1){
								_this.cangList = res.data.list;
							}else{
								_this.cangList = _this.list.concat(res.data.list)
							}
						}else{
							_this.showText = '没有更多了';
							_this.state = false;
						}
					}else{
						_this.toast(res.msg)
					}
				})
			},
			getDeep(){
				let _this = this;
				this.$req('huobi/depth',{
					symbol:_this.icon + '/usdt',
					type:'step2',
					depth:20
				},function(res){
					_this.birds = res.data.bids;
					_this.asks = res.data.asks;
				})
			},
			tapClick(i){
				this.idx1 = i;
			},
			tabClick(index,key){
				let _this = this;
				this.idx = index;
				this.kTime = key;
				if(!this.hasSocket){
					this.connectSocketInit();
				}else{
					uni.sendSocketMessage({
						data: JSON.stringify({
							// pang: Number(data.ping),
							// sub:'market.'+_this.icon+'usdt.kline.15min',
							// "id": "id1"
							
							symbol:(_this.icon?_this.icon:'btc')+'usdt',
							period:_this.kTime,
							size:"200"
						}),
						complete(res) {
							console.log(JSON.stringify(res))
						}
					})
				}
				
				
				// this.getCoin()
				// this.closeSocket();
				
				//_this.getChartData()
				// setTimeout(()=>{
				// 	_this.getChartData()
				// },1000)
				//clearInterval(_this.timer)
				// _this.timer = setInterval(()=>{
				// 	_this.page = 1;
					
				// 	_this.getChartData()
				// 	_this.getNums()
				// },1000)
				
			},
			splitData(rawData) {
			     var categoryData = [];
			     var values = []
			     for (var i = 0; i < rawData.length; i++) {
			         categoryData.push(rawData[i].splice(0, 1)[0]);
			         values.push(rawData[i])
			     }
			     return {
			         categoryData: categoryData,
			         values: values
			     };
			},
			calculateMA(dayCount, data) {
			  var result = [];
			  for (var i = 0, len = data.values.length; i < len; i++) {
			    if (i < dayCount) {
			      result.push('-');
			      continue;
			    }
			    var sum = 0;
			    for (var j = 0; j < dayCount; j++) {
			      sum += data.values[i - j][1];
			    }
			    result.push(+(sum / dayCount).toFixed(3));
			  }
			  return result;
			},
			getChartData(){
				let _this = this;
				this.$request('huobi/historyKline',
				{symbol:_this.icon+'usdt',period:_this.kTime,size:40},
				function(res){
					let data = res.data;
					let data1 = [];
					let data2 = [];
					data.forEach((item,i)=>{
						data1.push(_this.timestampToTime(data[i].id))
						data2.push([
							item.open,
							item.close,
							item.low,
							item.high
						])
					})
					_this.chartData.categories = data1;
					_this.chartData.series[0].data = data2;
					console.log(_this.chartData)
				})
			},
			// timestampToTime(timestamp) {
			// 	var date = new Date(timestamp * 1000);
			// 	var Y = date.getFullYear() + '-';
			// 	var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			// 	var D = date.getDate() + ' ';
			// 	var h = date.getHours() + ':';
			// 	var m = date.getMinutes() + ':';
			// 	var s = date.getSeconds();
			// 	return Y + M + D + h + m + s;
			// }
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() ;
				var s = date.getSeconds();
				if(this.kTime == '1day'){
					return Y+M+D;
				}else{
					return h+m;
				}
				
			}

		}
	}
</script>
<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>
<style>
.top{
	padding-top:var(--status-bar-height);
}
.tab_ac{
	color: #0066ee;
	border-bottom: 2px solid #0066ee;
}
.btn_up{
	background-color: #e13b61;
	color: #FFFFFF;
}
.btn_down{
	background-color: #01b08f;
	color: #FFFFFF;
}
.btn_no{
	border: 1px solid gray;
	color: #0066ee;
	font-weight: bold;
}

</style>
